class blogMagic_head extends root{
	构造函数(){
		this.initAttr();
		
	}
	渲染(){
		this.initEle();
		this.style.display="block";
		this.style.height=this.height+"px";
		this.style.position="fixed";
		this.style.width="100%";
		this.style.top="0";
		this.style.left="0";
		this.style.zIndex="999";
		this.appendChild(this.container);
	}
	/**
	 * 版本:1.0
	 * 描述:初始化属性
	 * 
	 */
	initAttr(){
		this.height=0.075*window.innerHeight;
		
	}
	/**
	 * 版本:1.0
	 * 描述：创建必要元素
	 */
	initEle(){
		//容器
		this.container=document.createElement("div");
		this.container.style.cssText=`height:${this.height}px;width:100%;background:rgba(255, 255, 255, 0.8);padding:8px 30px;display: flex;align-items: center;position:relative`;
		
		//图标
		this.container.icon=document.createElement("img");
		this.container.appendChild(this.container.icon);
		this.container.icon.src=this.getAttribute("icon");
		this.container.icon.style.cssText=`height:80%;`;
		
		//标题
		this.container.label=document.createElement("span");
		this.container.appendChild(this.container.label);
		this.container.label.innerText=this.getAttribute("title");
		this.container.label.style.cssText=`color:#67676c;font-weight: 600;cursor:pointer;font-size:1.5em`;
		this.container.label.onclick=()=>{window.location.href="/"};
		
		//导航栏
		this.container.nav=document.createElement("div");
		this.container.appendChild(this.container.nav);
		this.container.nav.innerHTML=`
		<ul class="layui-nav layui-bg-gray">
		  <li class="layui-nav-item"><a href="">首页</a></li>
		  <li class="layui-nav-item"><a href="">菜单1</a></li>
		  <li class="layui-nav-item"><a href="">菜单2</a></li>
		  <li class="layui-nav-item">
		    <a href="javascript:;">更多</a>
		    <dl class="layui-nav-child">
		      <dd><a href="">选项1</a></dd>
		      <dd><a href="">选项2</a></dd>
		      <dd><a href="">选项3</a></dd>
		    </dl>
		  </li>
		  <li class="layui-nav-item"><a href="">菜单3</a></li>
		</ul>
		`;
		
		//右部组件容器
		this.container.rightComponentContainer=document.createElement("div");
		this.in(this.container,this.container.rightComponentContainer);
		this.container.rightComponentContainer.style.cssText=`margin-left:auto`;
		this.container.rightComponentContainer.innerHTML=`
		<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
		    <i class="layui-icon layui-icon-search"></i>
		  </button>
		`;
	}
}
customElements.define('blogmagic-head', blogMagic_head);